﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--商品详情页</title>
	 <link rel="icon" href="/assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-item.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />

	<style type="text/css">
	.goods-intro-list li {
		display: inline-block;
		width: 300px;
	}
       .Ptable {
           margin: 10px 0;
       }
       .Ptable-item {
            padding: 12px 0;
            line-height: 220%;
            color: #999;
            font-size: 12px;
               border-bottom: 1px solid #eee;
        }
       .Ptable-item h3 {
           width: 110px;
           text-align: right;
       }
       .Ptable-item h3, .package-list h3 {
           font-weight: 400;
           font-size: 12px;
           float: left;
       }
       h3 {
           display: block;
           font-size: 1.17em;
           -webkit-margin-before: 1em;
           -webkit-margin-after: 1em;
           -webkit-margin-start: 0px;
           -webkit-margin-end: 0px;
           font-weight: bold;
       }
       .Ptable-item dl {
           margin-left: 110px;
       }
       dl {
           display: block;
           -webkit-margin-before: 1em;
           -webkit-margin-after: 1em;
           -webkit-margin-start: 0px;
           -webkit-margin-end: 0px;
       }
       .Ptable-item dt {
           width: 160px;
           float: left;
           text-align: right;
           padding-right: 5px;
       }
       .Ptable-item dd {
           margin-left: 210px;
       }
       dd {
           display: block;
           -webkit-margin-start: 40px;
       }
       .package-list {
           padding: 12px 0;
           line-height: 220%;
           color: #999;
           font-size: 12px;
           margin-top: -1px;
       }
       .package-list h3 {
           width: 130px;
           text-align: right;
       }
       .package-list p {
           margin-left: 155px;
           padding-right: 50px;
       }
</style>

</head>
<script th:inline="javascript">
	const genericSpec = JSON.parse(/*[[${spuDetail.genericSpec}]]*/ null);
    const oldGroups = /*[[${groups}]]*/ null;
    const paramMap = /*[[${paramMap}]]*/ null;
    const categories = /*[[${categories}]]*/ null;
    const spu = /*[[${spu}]]*/ null;
    const specialSpec = JSON.parse(/*[[${spuDetail.specialSpec}]]*/ null);
    const skus = /*[[${skus}]]*/ null;
    const brand = /*[[${brand}]]*/ null;

    // 用户选择的sku的规格参数的下标，先进行初始化
	const name = "indexes";
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    const r = window.location.search.substr(1).match(reg);
    const param = r!=null ? decodeURI(r[2]) : "";
    const index = param.split("_");
    const keys = Object.keys(specialSpec);
    const indexes = {};
    const enablesParams = [];
    for (let i=0;i<keys.length;i++){
        indexes[keys[i]] = parseInt(index[i]);
    }
    skus.forEach(sku => {
        Object.values(JSON.parse(sku.ownSpec)).forEach(s => enablesParams.push(s));

    })

</script>
<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<div id="itemApp">
	<div id="nav-bottom">
		<ly-top />
	</div>
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<!--/*@thymesVar id="categories" type="java.util"*/-->
					<li th:each=" category : ${categories}">
						<a th:text="${category.name}" href="#">手机</a>
					</li>
					<li>
						<a th:text="${brand.name}" href="#">apple</a>
					</li>

					<li class="active" th:text="${spu.title}">Apple iPhone 6s</li>
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
							</span>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<!-- 遍历skus，获得里面的所有image图片 -->
								<ul>
									<li v-for="(img,i) in images" :key="i">
										<img :src="img" :bimg="img" onmousemove="preview(this)" />
									</li>

								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4 v-text="sku.title">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h4>
					</div>
					<div class="news"><span th:utext="${spu.subTitle}">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</span></div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title"><i>价　　格</i></div>
							<div class="fl price">
								<i>¥</i><em v-text="ly.formatPrice(sku.price)">5299.00</em><span>降价通知</span>
							</div>
							<div class="fr remark"><i>累计评价</i><em>612188</em></div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">上海 <span>有货</span></em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
						<div id="specification" class="summary-wrap clearfix">
							<!-- 遍历specialSpec显示规格选择项 -->
							<dl v-for="(value,key) in specialSpec" :key="key">
								<dt>
									<div class="fl title">
									<i v-text="paramMap[key]"></i>
								</div>
								</dt>
								<dd v-for="(v,i) in value" :key="i">
									<a href="javascript:;" :class="{selected: i===indexes[key],locked: !flag(v)}"
									   @click="ownSpecClick(v,i,key)">
										<!--indexes[key] = i-->
										{{v}}<span title="点击取消选择">&nbsp;</span>
									</a>
								</dd>
								<!--<dd v-for="(c,i) in v" :key="i">
									<a href="javascript:;"
									   :class="{selected: i === indexes[k]}"
									   @click="indexes[k] = i"
									   >
										{{c}}<span title="点击取消选择">
										&nbsp;</span>
									</a>
								</dd>-->

							</dl>
							<!--<dl>
								<dt>
									<div class="fl title">
									<i>选择版本</i>
								</div>
								</dt>
								<dd><a href="javascript:;" class="selected">公开版<span title="点击取消选择">&nbsp;</span>
</a></dd>
								<dd><a href="javascript:;">移动版</a></dd>							
							</dl>
							<dl>
								<dt>
									<div class="fl title">
									<i>购买方式</i>
								</div>
								</dt>
								<dd><a href="javascript:;" class="selected">官方标配<span title="点击取消选择">&nbsp;</span>
</a></dd>
								<dd><a href="javascript:;">移动优惠版</a></dd>	
								<dd><a href="javascript:;"  class="locked">电信优惠版</a></dd>
							</dl>-->
						</div>

						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" type="text" disabled value="1" v-model="num" class="itxt" />
										<a href="javascript:void(0)" class="increment plus" @click="num++">+</a>
										<a href="javascript:void(0)" class="increment mins" @click="decreaseNum">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a @click="addCart" href="javascript:void(0)" target="_blank" class="sui-btn  btn-danger addshopcar">
											加入购物车
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part01.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					<div class="clearfix fitting">
						<h4 class="kt">选择搭配</h4>
						<div class="good-suits">
							<div class="fl master">
								<div class="list-wrap">
									<div class="p-img">
										<img src="/img/_/l-m01.png" />
									</div>
									<em>￥5299</em>
									<i>+</i>
								</div>
							</div>
							<div class="fl suits">
								<ul class="suit-list">
									<li class="">
										<div>
											<img src="/img/_/dp01.png" />
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>39</span>
  </label>
									</li>
									<li class="">
										<div ><img src="/img/_/dp02.png" /> </div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>50</span>
  </label>
									</li>
									<li class="">
										<div ><img src="/img/_/dp03.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>59</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp04.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>99</span>
  </label>
									</li>
								</ul>
							</div>
							<div class="fr result">
								<div class="num">已选购0件商品</div>
								<div class="price-tit"><strong>套餐价</strong></div>
								<div class="price">￥5299</div>
								<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<!-- 商品介绍,规格参数 -->
							<div id="one" class="tab-pane active">
								<ul class="goods-intro-list unstyled" style="list-style: none;">
									<!-- 选择的sku的参数 -->
									<li v-for="(v,k,i) in specialSpec">
										<span v-text="params[k]"></span>：<span v-text="v[indexes[k]]"></span>
									</li>
									<!-- 通用参数 -->
									<li v-for="(v,k) in genericSpec">
										<span v-text="params[k]"></span>：<span v-text="v"></span>
									</li>
								</ul>
								<!--商品详情-->
								<div class="intro-detail" th:utext="${spuDetail.description}">
									<!--<img src="/img/_/intro01.png" />
									<img src="/img/_/intro02.png" />
									<img src="/img/_/intro03.png" />-->
								</div>
							</div>
							<div id="two" class="tab-pane">
								<div class="Ptable">
    <div class="Ptable-item" v-for="(group,i) in groups" :key="i">
        <h3 v-text="group.name"></h3>
        <dl v-for="(param,j) in group.params">
            <dt v-text="param.name"></dt><dd v-text="param.v"></dd>
        </dl>
    </div>

</div>
<div class="package-list">
    <h3>包装清单</h3>
    <p th:text="${spuDetail.packingList}"></p>
</div>

							</div>
							<div id="three" class="tab-pane">
								<p th:text="${spuDetail.afterService}"></p>
							</div>
							<div id="four" class="tab-pane">
								<p>商品评价</p>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike01.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>3699.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike02.png" />
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4388.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike03.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike04.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike05.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike06.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>

<script>
    var itemVm = new Vue({
        el:"#itemApp",
        data:{
            ly,
			specialSpec,	// 特有规格参数
			paramMap,		// 规格参数id：name的键值对
			skus,
            oldGroups,			// 所有规格参数
            genericSpec,
			indexes,			// 用户选择的sku的规格参数下标
			num:1,			// 用户选择的商品的数量
			enablesParams,

            ownSpecs:[],
            existSpec:[],
            existIndexes:[],
            spu

        },
        components:{
            lyTop: () => import('/js/pages/top.js')
        },

        created(){
            ly.http.get("/item/sku/ownSpecs/"+this.spu.id).then(Resp=>{
                this.ownSpecs=Resp.data.map(v=>JSON.parse(v));
                this.ownSpecs.forEach(o=>{
                    this.existSpec.push(o["4"]);
                    this.existSpec.push(o["12"]);
                    this.existSpec.push(o["13"]);
                })
            });
            ly.http.get("/item/sku/indexes/"+this.spu.id).then(resp=>{
                this.existIndexes=resp.data;
            })
        },

		methods:{
            decreaseNum(){
                if (this.num > 1) {
                    this.num--;
                }
			},
			// 添加到购物车的方法
            addCart(){
                // 先判断用户是否是登陆状态
				ly.http.get("auth/verify").then(() => {
				    // 是登陆状态，则发送消息到后台，添加至redis
					ly.http.post("/cart",{'skuId':this.sku.id,'num':this.num}).then(() => {
                        window.location.href= "http://www.leyou.com/cart.html";
					}).catch(() => {
					    alert("服务器繁忙，请稍后操作")
					})

				}).catch(() => {
					// 不是登陆，则保存至本地locationStore，
					// 先从locationStore中取出以前保存的然后更新
					const carts = ly.store.get("carts") || [];
					let cart = carts.find(c => c.skuId === this.sku.id);
                    if (cart) {
                        // 存在，则增减此次选择的数量
                        cart.num += this.num;
                    } else {
                        // 不存在，则新添加进去
						cart = {
						    skuId:this.sku.id,
							title:this.sku.title,
							price:this.sku.price,
							image:this.images[0],
							ownSpec:JSON.stringify(this.ownSpec),
							num:this.num,
							enable:this.sku.enable
						}
						carts.push(cart)
                    }
                    // 把carts回写进localStore
					ly.store.set('carts',carts);
                    // 跳转至购物车页面
					window.location.href= "http://www.leyou.com/cart.html";

				});
			},

            // 计算选中的商品的index，是规格那边显示active效果
            index(k){
                return JSON.parse(this.sku.ownSpec)[k];
            },

			// 不可点击的判断
            flag(v){
                return this.existSpec.includes(v);
            },

            //key:12,i:0,v:4GB
            ownSpecClick(v, i, key) {

                const f = Object;
                Object.assign(f,this.indexes);
                f[key]=i;
                this.existSpec=[];
                this.ownSpecs.forEach(o=>{
                    this.existSpec.push(o[key]);
                    if(o[key]===v){
                        this.existSpec.push(o[4]);
                        this.existSpec.push(o[12]);
                        this.existSpec.push(o[13]);
                    }
                });
                /**
                 * existIndexes:[
                 * "0_0_0",
                 * "0_1_0"
                 * ...
                 * ]
                 * @type {string}
                 */
                let index = Object.values(f).join("_"); // 选择的index 1_0_0
                if(this.existIndexes.includes(index)){
                    this.indexes[key] = i;
                }else{
                    let existIndexes1=[];

                    this.existIndexes.forEach(m=>{
                        console.log(m.toString());
                        const b = m.split("_");
                        console.log("b的值=["+b[0]+","+b[1]+","+b[2]+"]");
                        existIndexes1.push({4:b[0],12:b[1],13:b[2]})
                    });
                    console.log(existIndexes1[0]);
                    console.log("i的值是"+i+","+"key的值是"+key);
                    existIndexes1.forEach(o=>{
                        console.log("o的值="+o["4"]+","+o["12"]+","+o["13"]);
                        console.log("o[key]的值是"+o[key]);
                        if(o[key]==i){
                            this.indexes["4"]=o["4"];
                            this.indexes["12"]=o["12"];
                            this.indexes["13"]=o["13"];
                            console.log("循环内indexes的值="+this.indexes["4"]+","+this.indexes["12"]+","+this.indexes["13"]);
                            console.log("进入方法");
                        }
                        // o[key]==i?console.log("进入方法"):console.log("不相等");
                    });
                    console.log("indexes的值="+this.indexes["4"]+","+this.indexes["12"]+","+this.indexes["13"]);
                    // this.indexes["4"]=2;
                    // this.indexes["12"]=1;
                    // this.indexes["13"]=1;
                }
            },
		},

		computed:{
            // 计算用户选择的是哪一个sku
            sku(){
                const index = Object.values(this.indexes).join("_");
                return this.skus.find(s => s.indexes === index);
			},

			// 对sku商品的图片字符串进行分割处理
			images(){
                return this.sku.images ? this.sku.images.split(",") : "";
			},

			// 获得所有的参数params，专程格式为[{id:name},{id:name}...]
			params(){
                const params = {};
                this.oldGroups.forEach(group => {
					group.params.forEach(param => {
					    params[param.id] = param.name;
					})
				});
				return params;
			},

			// 转变groups格式组合，显示在规格参数一栏
			groups(){
                this.oldGroups.forEach(group => {
                    group.params.forEach(param => {
                        // 通用参数
                        if (param.generic) {
                            param.v = genericSpec[param.id] || '其它';
                        } else {
                            param.v = JSON.parse(this.sku.ownSpec)[param.id];
                        }
					})
				});
                return this.oldGroups;
			},

            // 选中的sku的特有规格参数
            ownSpec(){
                // 获取选中的sku的ownSpec，提取所有的key，是[4,12,13]
				const spec = JSON.parse(this.sku.ownSpec);
                const keys = Object.keys(spec);
                // 遍历，从paramMap中获得对应的参数名字
				const ownSpec = {};
				keys.forEach(k => ownSpec[this.paramMap[k]] = spec[k]);
				return ownSpec;
			},


		}
    });
</script>

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript" src="index/index.js"></script>
</body>

</html>